<template>
  <div class="app-container">
    <div class="body">
      <el-row>
        <el-col :span="24">
          <!-- 查询表单 -->
          <el-row>
            <el-form
              :inline="true"
              size="mini"
              :model="searchForm"
              ref="searchForm"
              class="demo-form-inline"
            >
              <el-form-item label="关键字">
                <el-input
                  clearable
                  v-model="searchForm.keyword"
                  placeholder="请输入关键字"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleBatchDeleted()"
                  >批量刪除</el-button
                >
              </el-form-item>
            </el-form>
          </el-row>
          <!-- 表格 -->
          <el-row>
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="id" label="编号"> </el-table-column>
              <el-table-column prop="name" label="登录名称"> </el-table-column>
              <el-table-column prop="ip" label="ip地址"> </el-table-column>
              <el-table-column prop="loginUserType" label="登录者类型">
              </el-table-column>
              <el-table-column prop="info" label="操作信息"> </el-table-column>
              <el-table-column prop="content" label="日志内容">
              </el-table-column>
              <el-table-column
                prop="loginTime"
                label="登陆时间"
              ></el-table-column>
            </el-table>
          </el-row>
          <!-- 分页 -->
          <el-row>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchForm.currentPage"
              :page-sizes="[3, 5, 10, 20]"
              :page-size="searchForm.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { loginLogList, batchDelete } from "@/api/system/loginLogger";

export default {
  name: "User",
  data() {
    return {
      dialogTitle: "",
      dialogFormVisible: false,
      statusList: [
        { value: 0, label: "正常" },
        { value: 1, label: "禁用" },
      ],
      deletedList: [
        { value: 0, label: "正常" },
        { value: 1, label: "删除" },
      ],
      total: 0,
      tableData: [],
      loading: true,
      searchForm: {
        keyword: "",
        currentPage: 1,
        pageSize: 3,
      },
      deletedIds: [],
    };
  },
  methods: {
    handleCurrentChange(current) {
      this.searchForm.currentPage = current;
      // 当每页显示数发生变动时触发
      this.fetchLoggerData(this.searchForm);
    },
    handleSizeChange(size) {
      this.searchForm.pageSize = size;
      // 当前页发生变动时触发
      this.fetchLoggerData(this.searchForm);
    },
    fetchLoggerData(params) {
      loginLogList(params).then((res) => {
        const { data } = res;
        this.searchForm.currentPage = data.currentPage;
        this.searchForm.pageSize = data.pageSize;
        this.tableData = data.data;
        this.total = data.totalCount;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      const temp = [];
      val.forEach((logger) => {
        temp.push(logger.id);
      });
      // 去除重复的 id
      this.deletedIds = Array.from(new Set(temp));
    },
    handleBatchDeleted() {
      this.$confirm("此操作将批量删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          batchDelete(this.deletedIds).then((res) => {
            this.deletedIds = [];
            this.fetchLoggerData();
            this.$message.success("批量删除成功！");
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onSubmit() {
      this.fetchLoggerData(this.searchForm);
    },
  },
  created() {
    this.fetchLoggerData();
  },
};
</script>

<style lang="css" scoped>
.line {
  text-align: center;
}

.el-pagination {
  text-align: right;
}
</style>
